<route lang="yaml">
meta:
  enabled: false
              </route>

<script lang="ts" setup>
import { VXETable } from 'vxe-table'
import type { VxeColumnPropTypes, VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeSelectEvents, VxeTableEvents, VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'
import html2canvas from 'html2canvas'
import printJS from 'print-js'
import apiTransBill from '@/api/modules/trans_bill'
import apiCarrier from '@/api/modules/carrier'
import apiCar from '@/api/modules/car'
import apiDriver from '@/api/modules/driver'
import apiOrder from '@/api/modules/order'
import dayjs from '@/utils/dayjs'

const g = useGlobalProperties()
const refModalForm = ref<VxeFormInstance>()
const refModalOrderTable = ref<VxeTableInstance>()
const pageData = reactive({
  loading: false,
  orderLoading: false,
  tableData: [] as any[],
  carrierList: [] as any[],
  carList: [] as any[],
  driverList: [] as any[],
  statusList: [] as any[],
  storageTempList: [] as any[],
  // 弹窗相关
  modalShow: false,
  modalName: '',
  curBill: {} as any,
})
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
interface ModalForm {
  id: number
  sn: string
  carrier_name: string
  carrier_id: string
  car_sn: string
  car_id: string
  driver_name: string
  driver_id: string
  status: string
}
const modalFormData = ref<ModalForm>({
  id: 0,
  sn: '',
  carrier_name: '',
  carrier_id: '',
  car_sn: '',
  car_id: '',
  driver_name: '',
  driver_id: '',
  status: '',
})
const formRules = {
  name: [
    { required: true, message: '请输入名称' },
  ],
}
interface FormDataVO {
  sn: string
  carrierId: string
  carId: string
  driverId: string
  status: string
}
const formTop = reactive<FormDataVO>({
  sn: '',
  carrierId: '',
  carId: '',
  driverId: '',
  status: '',
})
function sumbitModalEvent() {
  refModalForm.value?.validate((valid) => {
    if (!valid) { // 校验通过
      apiTransBill.createOrUpdate(modalFormData.value).then((res: any) => {
        pageData.modalShow = false
        // tablePage.currentPage = 1
        // tablePage.pageSize = 10
        const req = {
          pageIndex: tablePage.currentPage,
          pageSize: tablePage.pageSize,
          sn: formTop.sn,
          carrierId: formTop.carrierId,
          carId: formTop.carId,
          driverId: formTop.driverId,
          status: formTop.status,
        }
        apiPage(req)
      }).catch((e: any) => {
        if (e.msg) {
          ElMessage.error({
            message: e.msg,
            center: true,
          })
        }
      })
    }
  })
}
function cancelModalEvent() {
  pageData.modalShow = false
}
const tableRef = ref<VxeTableInstance>()
const tableInOrderRef = ref<VxeTableInstance>()
/// ///////////////////////////////////表单打印
const printModal = reactive({
  showModal: false,
  billAndOrders: {} as any,
  img: '',
})
/// ///////////////////////////////////订单弹窗
const orderModal = reactive({
  showModal: false,
  tableNotBindData: [] as any[],
  tableBindData: [] as any[],
  orderCode: '',
  customerName: '',
  route: '',
  storageTemp: '',
})
const tableOrderPage = reactive({
  total: 0,
  currentPage: 1,
  limit: 10,
})
function searchUserEvent() {
  tableOrderPage.currentPage = 1
  tableOrderPage.limit = 10
  const req = {
    from: tableOrderPage.currentPage,
    limit: tableOrderPage.limit,
    orderCode: orderModal.orderCode,
    customerName: orderModal.customerName,
    routeName: orderModal.route,
    tempType: orderModal.storageTemp,
  }
  apiOrderPage(req)
}
function searchUserResetEvent() {
  orderModal.orderCode = ''
  orderModal.customerName = ''
  orderModal.route = ''
  orderModal.storageTemp = ''
  tableOrderPage.currentPage = 1
  tableOrderPage.limit = 10
  const req = {
    from: tableOrderPage.currentPage,
    limit: tableOrderPage.limit,
    orderCode: orderModal.orderCode,
    customerName: orderModal.customerName,
    routeName: orderModal.route,
    tempType: orderModal.storageTemp,
  }
  apiOrderPage(req)
}

const handleOrderPageChange: VxePagerEvents.PageChange = ({ currentPage, limit }) => {
  tableOrderPage.currentPage = currentPage
  tableOrderPage.limit = limit
  const req = {
    from: tableOrderPage.currentPage,
    limit: tableOrderPage.limit,
    orderCode: orderModal.orderCode,
    customerName: orderModal.customerName,
    routeName: orderModal.route,
    tempType: orderModal.storageTemp,
  }
  apiOrderPage(req)
}
function cancelOrder() {
  orderModal.showModal = false
}
/// ///////////////////////////////////右边栏
const tableOrderRight = reactive({
  total: 0,
  currentPage: 1,
  limit: 10,
})
interface FormDataRightVO {
  orderCode: string
  billSn: string
  customerName: string
  routeName: string
  priorityLevel: string
  status: string
}
const formTopRight = reactive<FormDataRightVO>({
  orderCode: '',
  billSn: '',
  customerName: '',
  routeName: '',
  priorityLevel: '',
  status: '',
})
const handleRightPageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  tableOrderRight.currentPage = currentPage
  tableOrderRight.limit = pageSize
  const req = {
    pageIndex: tableOrderRight.currentPage,
    pageSize: tableOrderRight.limit,
    billSn: formTopRight.billSn,
    priorityLevel: formTopRight.priorityLevel,
    orderCode: formTopRight.orderCode,
    customerName: formTopRight.customerName,
    routeName: formTopRight.routeName,
    status: formTopRight.status,
  }
  apiOrderInPage(req)
}
const cellTransBillClick: VxeTableEvents.CellClick<any> = ({ row }) => {
  pageData.curBill = row
  formTopRight.billSn = pageData.curBill.sn
  tableOrderRight.currentPage = 1
  tableOrderRight.limit = 10
  const req = {
    pageIndex: tableOrderRight.currentPage,
    pageSize: tableOrderRight.limit,
    billSn: formTopRight.billSn,
    priorityLevel: formTopRight.priorityLevel,
    orderCode: formTopRight.orderCode,
    customerName: formTopRight.customerName,
    routeName: formTopRight.routeName,
    status: formTopRight.status,
  }
  apiOrderInPage(req)
}
function bindActionClick(row: any) {
  const req = {
    id: row.id,
    billId: pageData.curBill.id,
    billSn: pageData.curBill.sn,
  }
  apiOrder.updateBillInfo(req).then((res) => {
    ElMessage.success({
      message: '绑定成功',
      center: true,
    })
    // 刷新订单界面
    tableOrderPage.currentPage = 1
    tableOrderPage.limit = 10
    const req = {
      from: tableOrderPage.currentPage,
      limit: tableOrderPage.limit,
      orderCode: orderModal.orderCode,
      customerName: orderModal.customerName,
      routeName: orderModal.route,
      tempType: orderModal.storageTemp,
    }
    apiOrderPage(req)
    // 刷新右侧
    tableOrderRight.currentPage = 1
    tableOrderRight.limit = 10
    const reqRight = {
      pageIndex: tableOrderRight.currentPage,
      pageSize: tableOrderRight.limit,
      billSn: formTopRight.billSn,
      priorityLevel: formTopRight.priorityLevel,
      orderCode: formTopRight.orderCode,
      customerName: formTopRight.customerName,
      routeName: formTopRight.routeName,
      status: formTopRight.status,
    }
    apiOrderInPage(reqRight)
  }).catch((e) => {
    if (e && e.msg) {
      ElMessage.error({
        message: e.msg,
        center: true,
      })
    }
  })
}
function unbindOrder(row: any) {
  VXETable.modal.confirm('确定移除？').then((res) => {
    if (res === 'confirm') {
      const req = {
        id: row.id,
        billId: 0,
        billSn: '',
      }
      apiOrder.updateBillInfo(req).then((res) => {
        ElMessage.success({
          message: '移除成功',
          center: true,
        })
        // 刷新右侧
        tableOrderRight.currentPage = 1
        tableOrderRight.limit = 10
        const reqRight = {
          pageIndex: tableOrderRight.currentPage,
          pageSize: tableOrderRight.limit,
          billSn: formTopRight.billSn,
          priorityLevel: formTopRight.priorityLevel,
          orderCode: formTopRight.orderCode,
          customerName: formTopRight.customerName,
          routeName: formTopRight.routeName,
          status: formTopRight.status,
        }
        apiOrderInPage(reqRight)
      }).catch((e) => {
        if (e && e.msg) {
          ElMessage.error({
            message: e.msg,
            center: true,
          })
        }
      })
    }
  })
}
/// ///////////////////////////////////右侧按钮相关
function delItem(row: any) {
  VXETable.modal.confirm('确定删除？').then((res) => {
    if (res === 'confirm') {
      apiTransBill.del(row.id).then((res: any) => {
        const $table = tableRef.value
        $table?.remove(row)
      })
    }
  })
}
function editItem(row: any) {
  pageData.modalName = '编辑'
  modalFormData.value = row
  pageData.modalShow = true
}
function associateOrders(row: any) {
  pageData.curBill = row
  tableOrderPage.currentPage = 1
  tableOrderPage.limit = 10
  const req = {
    from: tableOrderPage.currentPage,
    limit: tableOrderPage.limit,
    orderCode: orderModal.orderCode,
    customerName: orderModal.customerName,
    routeName: orderModal.route,
    tempType: orderModal.storageTemp,
  }
  apiOrderPage(req)
  orderModal.showModal = true
}
function printBill(row: any) {
  apiTransBill.billAndOrdersBySn(row.id).then((res) => {
    printModal.billAndOrders = res.data
    printModal.showModal = true
  })
}
function printConfirm() {
  const ret = document.getElementById('print-js-data')
  if (ret) {
    html2canvas(ret, {
      useCORS: true,
      // logging: false,
      // scale: 0.9, // 按比例增加分辨率，调整显示比例
      // allowTaint: true,
    }).then((canvas) => {
      // document.body.appendChild(canvas)
      const file = canvas.toDataURL('image/jpeg', 1.0)
      printModal.img = file
      printJS({ printable: file, type: 'image', style: '@media print { @page {size: auto; margin: 0; } body{margin:0 5px}}' })
    })
  }
}
function printConfirm2() {
  printJS({
    printable: 'print-js-data', // 元素id,不支持多个
    type: 'html',
    targetStyle: ['* '],
    targetStyles: ['*'],
    // maxWidth: 2048,
    style: '@media print { @page {size: auto; margin: 0; } body{margin:0 5px}}', // landscape  默认横向打印
  })
}
function printCancel() {
  printModal.showModal = false
}
/// ///////////////////////////////////top按钮相关
function newOrg() {
  pageData.modalName = '新增'
  modalFormData.value = { status: '1' } as any
  pageData.modalShow = true
}
function removeSelected() {
  const $table = tableRef.value
  if ($table?.getCheckboxRecords().length === 0) {
    ElMessage.error({
      message: '请选中删除行',
      center: true,
    })
    return
  }
  VXETable.modal.confirm('确定删除！！！').then((res) => {
    if (res === 'confirm') {
      const ids = $table?.getCheckboxRecords().map(item => item.id)
      apiTransBill.delBatch(ids).then((res: any) => {
        $table?.removeCheckboxRow()
      })
    }
  })
}
function batchByRoute() {
  VXETable.modal.confirm('批量生成是按照线路和温控条件，请先维护线路对应的承运商、车辆、司机').then((res) => {
    if (res === 'confirm') {
      apiTransBill.batchBill({}).then((res) => {
        ElMessage.success({
          message: '批量生成完毕，请关联运输信息',
          center: true,
        })
      }).catch((e) => {
        if (e && e.msg) {
          ElMessage.error({
            message: e.msg,
            center: true,
          })
        }
      })
    }
  })
}
/// ///////////////////////////////////api
function apiPage(req: any) {
  pageData.loading = true
  apiTransBill.page(req).then((res) => {
    pageData.tableData = res.data.list
    tablePage.total = res.data.total
    pageData.loading = false
  }).catch((err) => {
    ElMessage.error({
      message: JSON.stringify(err),
      center: true,
    })
    pageData.loading = false
  })
}
function apiListCarrier() {
  apiCarrier.list({}).then((res: any) => {
    pageData.carrierList = res.data.list
  })
}
function apiListCar() {
  apiCar.list({}).then((res: any) => {
    pageData.carList = res.data.list
  })
}
function apiListDriver() {
  apiDriver.list({}).then((res: any) => {
    pageData.driverList = res.data.list
  })
}
function apiOrderInPage(req: any) {
  pageData.orderLoading = true
  apiOrder.page(req).then((res) => {
    orderModal.tableBindData = res.data.list
    tableOrderRight.total = res.data.total
    pageData.orderLoading = false
  }).catch((err) => {
    ElMessage.error({
      message: JSON.stringify(err),
      center: true,
    })
    pageData.orderLoading = false
  })
}
function apiOrderPage(req: any) {
  pageData.loading = true
  apiOrder.pageNotBind(req).then((res) => {
    orderModal.tableNotBindData = res.data.list
    tableOrderPage.total = res.data.total
    pageData.loading = false
  }).catch((err) => {
    ElMessage.error({
      message: JSON.stringify(err),
      center: true,
    })
    pageData.loading = false
  })
}
/// ////////////////////////////////////下拉
const carrierSelectChange: VxeSelectEvents.Change = (e) => {
  for (let i = 0; i < pageData.carrierList.length; i++) {
    if (pageData.carrierList[i].id === e.value) {
      modalFormData.value.carrier_name = pageData.carrierList[i].name
      break
    }
  }
}
const carSelectChange: VxeSelectEvents.Change = (e) => {
  for (let i = 0; i < pageData.carList.length; i++) {
    if (pageData.carList[i].id === e.value) {
      modalFormData.value.car_sn = pageData.carList[i].sn
      break
    }
  }
}
const driverSelectChange: VxeSelectEvents.Change = (e) => {
  for (let i = 0; i < pageData.driverList.length; i++) {
    if (pageData.driverList[i].id === e.value) {
      modalFormData.value.driver_name = pageData.driverList[i].name
      break
    }
  }
}
/// ///////////////////////////////////formatter
const formatterStatus: VxeColumnPropTypes.Formatter<any> = ({ cellValue }) => {
  const res = g.selectDictLabel(pageData.statusList, cellValue)
  return res
}
const formatterTime: VxeColumnPropTypes.Formatter<any> = ({ cellValue }) => {
  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
}
/// ///////////////////////////////////翻页
const submitTopEvent: VxeFormEvents.Submit = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    sn: formTop.sn,
    carrierId: formTop.carrierId,
    carId: formTop.carId,
    driverId: formTop.driverId,
    status: formTop.status,
  }
  apiPage(req)
}

const resetTopEvent: VxeFormEvents.Reset = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    sn: formTop.sn,
    carrierId: formTop.carrierId,
    carId: formTop.carId,
    driverId: formTop.driverId,
    status: formTop.status,
  }
  apiPage(req)
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    sn: formTop.sn,
    carrierId: formTop.carrierId,
    carId: formTop.carId,
    driverId: formTop.driverId,
    status: formTop.status,
  }
  apiPage(req)
}
/// ///////////////////////////////////生命周期
onBeforeMount(() => {
  g.getDicts('trans_bill_status').then((res: any) => {
    pageData.statusList = res.data.list
  })
  g.getDicts('storage_type').then((res: any) => {
    pageData.storageTempList = res.data.list
  })
})
onMounted(() => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    sn: formTop.sn,
    carrierId: formTop.carrierId,
    carId: formTop.carId,
    driverId: formTop.driverId,
    status: formTop.status,
  }
  apiPage(req)
  apiListCarrier()
  apiListCar()
  apiListDriver()
})
</script>

<template>
  <div class="all-page">
    <div class="page-wrap">
      <div class="page-top">
        <vxe-form :data="formTop" style="padding-left: 5px;" @submit="submitTopEvent" @reset="resetTopEvent">
          <vxe-form-item title="运单号" field="sn" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.sn" placeholder="请输入单号" clearable />
            </template>
          </vxe-form-item>
          <vxe-form-item title="承运商" field="carrierId" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.carrierId" placeholder="请选择承运商" clearable>
                <vxe-option
                  v-for="(item, index) in pageData.carrierList" :key="index" :value="item.id"
                  :label="item.name"
                />
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="车辆" field="carId" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.carId" placeholder="请选择车辆" clearable>
                <vxe-option v-for="(item, index) in pageData.carList" :key="index" :value="item.id" :label="item.sn" />
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="司机" field="driverId" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.driverId" placeholder="请选择司机" clearable>
                <vxe-option
                  v-for="(item, index) in pageData.driverList" :key="index" :value="item.id"
                  :label="item.name"
                />
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="状态" field="status" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.status" placeholder="请选择状态" clearable>
                <vxe-option
                  v-for="(item, index) in pageData.statusList" :key="index" :value="item.value"
                  :label="item.label"
                />
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item>
            <template #default>
              <vxe-button type="submit" status="primary" content="搜索" />
              <vxe-button type="reset" content="重置" />
            </template>
          </vxe-form-item>
        </vxe-form>
        <vxe-toolbar>
          <template #buttons>
            <vxe-button style="margin-left: 5px;" @click="newOrg">
              新增
            </vxe-button>
            <vxe-button @click="removeSelected">
              删除选中
            </vxe-button>
            <vxe-button @click="batchByRoute">
              按照线路批量生成
            </vxe-button>
          </template>
        </vxe-toolbar>
      </div>
      <page-main>
        <vxe-table
          ref="tableRef" auto-resize border stripe :loading="pageData.loading"
          :column-config="{ resizable: true }" :row-config="{ isHover: true }"
          :checkbox-config="{ highlight: true, range: true }" :data="pageData.tableData" align="center"
          header-align="center" highlight-current-row @cell-click="cellTransBillClick"
        >
          <vxe-column type="checkbox" width="50" />
          <vxe-column field="sn" align="center" title="运单号" />
          <vxe-column field="carrier_name" align="center" title="承运商" />
          <vxe-column field="car_sn" align="center" title="车辆" />
          <vxe-column field="driver_name" align="center" title="司机" />
          <vxe-column field="status" align="center" title="运单状态" :formatter="formatterStatus" />
          <vxe-column field="cteated_at" align="center" title="创建时间" :formatter="formatterTime" />
          <vxe-column title="操作" fixed="right" width="200">
            <template #default="{ row }">
              <vxe-button type="text" @click="delItem(row)">
                删除
              </vxe-button>
              <vxe-button type="text" @click="editItem(row)">
                编辑
              </vxe-button>
              <vxe-button type="text" @click="printBill(row)">
                装车单据
              </vxe-button>
              <vxe-button type="text" @click="associateOrders(row)">
                关联订单
              </vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
      </page-main>
      <div class="page-opration-container">
        <vxe-pager
          v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize"
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :total="tablePage.total" @page-change="handlePageChange"
        />
      </div>
      <div>
        <vxe-modal v-model="pageData.modalShow" width="800" height="600">
          <template #title>
            <span style="color: red;">{{ pageData.modalName }}</span>
          </template>
          <template #default>
            <div style="display: flex;flex-direction: column;height: 100%;">
              <div style="flex: 1;">
                <vxe-form ref="refModalForm" :data="modalFormData" :rules="formRules" title-width="80">
                  <vxe-form-gather span="24">
                    <vxe-form-item v-if="pageData.modalName === '编辑'" title="运单号" field="sn" :item-render="{}" span="12">
                      <template #default="{ data }">
                        <vxe-input v-model="data.sn" disabled />
                      </template>
                    </vxe-form-item>
                    <vxe-form-item title="承运商" field="carrier_id" :item-render="{}" span="12">
                      <template #default="{ data }">
                        <vxe-select
                          v-model="data.carrier_id" placeholder="请选择承运商" clearable
                          @change="carrierSelectChange"
                        >
                          <vxe-option
                            v-for="(item, index) in pageData.carrierList" :key="index" :value="item.id"
                            :label="item.name"
                          />
                        </vxe-select>
                      </template>
                    </vxe-form-item>
                  </vxe-form-gather>
                  <vxe-form-gather span="24">
                    <vxe-form-item title="车辆" field="car_id" :item-render="{}" span="12">
                      <template #default="{ data }">
                        <vxe-select v-model="data.car_id" placeholder="请选择车辆" clearable @change="carSelectChange">
                          <vxe-option
                            v-for="(item, index) in pageData.carList" :key="index" :value="item.id"
                            :label="item.sn"
                          />
                        </vxe-select>
                      </template>
                    </vxe-form-item>
                    <vxe-form-item title="司机" field="driver_id" :item-render="{}" span="12">
                      <template #default="{ data }">
                        <vxe-select v-model="data.driver_id" placeholder="请选择司机" clearable @change="driverSelectChange">
                          <vxe-option
                            v-for="(item, index) in pageData.driverList" :key="index" :value="item.id"
                            :label="item.name"
                          />
                        </vxe-select>
                      </template>
                    </vxe-form-item>
                  </vxe-form-gather>
                  <vxe-form-gather span="24">
                    <vxe-form-item title="运单状态" field="status" :item-render="{}" span="12">
                      <template #default="{ data }">
                        <vxe-select v-model="data.status" placeholder="请选择运单状态" clearable>
                          <vxe-option
                            v-for="(item, index) in pageData.statusList" :key="index" :value="item.value"
                            :label="item.label"
                          />
                        </vxe-select>
                      </template>
                    </vxe-form-item>
                  </vxe-form-gather>
                </vxe-form>
              </div>

              <div style="display: flex;justify-content: flex-end;">
                <vxe-button content="取消" @click="cancelModalEvent" />
                <vxe-button status="primary" content="提交" @click="sumbitModalEvent" />
              </div>
            </div>
          </template>
        </vxe-modal>
      </div>
    </div>
    <div class="right-side">
      <div class="side-top">
        <!-- <div>
          {{ pageData.curTmplDept.name || '请选择部门' }}
        </div>
        <div>
          <vxe-button status="primary" @click="associateTmpl">
            关联模版
          </vxe-button>
        </div> -->
      </div>
      <page-main>
        <vxe-table
          ref="tableInOrderRef" auto-resize border stripe :loading="pageData.orderLoading"
          :column-config="{ resizable: true }" :row-config="{ isHover: true }"
          :checkbox-config="{ highlight: true, range: true }" :data="orderModal.tableBindData" align="center"
          header-align="center"
        >
          <vxe-column type="checkbox" width="50" />
          <vxe-column min-width="150" field="order_code" align="center" title="编号" />
          <vxe-column min-width="200" field="customer_name" align="center" title="客户" />
          <vxe-column min-width="50" field="route" align="center" title="线路" />
          <vxe-column min-width="80" field="pack_count" align="center" title="箱/包数" />
          <vxe-column title="操作" fixed="right" width="80">
            <template #default="{ row }">
              <vxe-button type="text" @click="unbindOrder(row)">
                移除
              </vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
      </page-main>
      <div class="page-opration-container-right">
        <vxe-pager
          v-model:current-page="tableOrderRight.currentPage" v-model:page-size="tableOrderRight.limit"
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :total="tableOrderRight.total" @page-change="handleRightPageChange"
        />
      </div>
    </div>
    <div>
      <vxe-modal v-model="orderModal.showModal" width="1300" height="800" show-footer>
        <template #title>
          关联到运单{{ pageData.curBill.sn }}
        </template>
        <template #default>
          <div class="edit_dev" style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
            <div style="width: 95%;display: flex;justify-content: flex-start;align-items: center;">
              <vxe-input v-model="orderModal.orderCode" type="text" placeholder="输入订单号" size="medium" />
              <vxe-input
                v-model="orderModal.customerName" style="margin-left: 5px;" type="text" placeholder="输入客商名称"
                size="medium"
              />
              <vxe-input
                v-model="orderModal.route" style="margin-left: 5px;" type="text" placeholder="输入线路"
                size="medium"
              />
              <vxe-select v-model="orderModal.storageTemp" placeholder="请选择温控要求" clearable>
                <vxe-option
                  v-for="(item, index) in pageData.storageTempList" :key="index" :value="item.value"
                  :label="item.label"
                />
              </vxe-select>
              <vxe-button status="primary" @click="searchUserEvent">
                搜索
              </vxe-button>
              <vxe-button @click="searchUserResetEvent">
                重置
              </vxe-button>
            </div>
            <div style="display: flex;flex-direction: column;width: 100%;">
              <div>
                <vxe-table
                  ref="refModalOrderTable" auto-resize border stripe :loading="pageData.loading"
                  :column-config="{ resizable: true }" :row-config="{ isHover: true }"
                  :checkbox-config="{ highlight: true, range: true }" :data="orderModal.tableNotBindData" align="center"
                  header-align="center"
                >
                  <vxe-column field="order_code" align="center" title="订单号" />
                  <vxe-column field="customer_name" align="center" title="客商" />
                  <vxe-column field="pack_count" align="center" title="箱/包数" />
                  <vxe-column field="route" align="center" title="线路" />
                  <vxe-column title="操作" fixed="right" width="200">
                    <template #default="{ row }">
                      <vxe-button status="primary" @click="bindActionClick(row)">
                        添加到运单
                      </vxe-button>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <vxe-pager
              v-model:current-page="tableOrderPage.currentPage" v-model:page-size="tableOrderPage.limit"
              :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
              :total="tableOrderPage.total" @page-change="handleOrderPageChange"
            />
            <vxe-button status="primary" @click="cancelOrder">
              关闭
            </vxe-button>
          </div>
        </template>
      </vxe-modal>
    </div>
    <div>
      <vxe-modal v-model="printModal.showModal" width="1300" height="800">
        <template #default>
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div id="print-js-data" style="flex: 1;">
              <div style="display: flex;flex-direction: column;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                  <div>运单号:{{ printModal.billAndOrders.billHeader.sn }}</div>
                  <div>承运商:{{ printModal.billAndOrders.billHeader.carrier_name }}</div>
                  <div>车辆:{{ printModal.billAndOrders.billHeader.car_sn }}</div>
                  <div>司机:{{ printModal.billAndOrders.billHeader.driver_name }}</div>
                </div>
                <div>
                  <div v-for="(itemOrder, indexOrder) in printModal.billAndOrders.billOrders" :key="indexOrder">
                    <div style="display: flex;flex-direction: column;border: 1px solid red;margin-bottom: 10px;">
                      <div
                        style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid blue;"
                      >
                        <div>订单号: {{ itemOrder.order.order_code }}</div>
                        <div>客商: {{ itemOrder.order.customer_name }}</div>
                        <div>箱/包数: {{ itemOrder.order.pack_count }}</div>
                        <div>线路: {{ itemOrder.order.route }}</div>
                        <div>订单类型: {{ itemOrder.order.order_type }}</div>
                        <div>温控要求: {{ itemOrder.order.trans_temp_type }}</div>
                      </div>
                      <div v-for="(itemOrderDetail, indexOrderDetail) in itemOrder.orderDetails" :key="indexOrderDetail">
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                          <div>行号: {{ itemOrderDetail.order_line_num }}</div>
                          <div>商品名称: {{ itemOrderDetail.product_name }}</div>
                          <div>规格: {{ itemOrderDetail.specifications }}</div>
                          <div>数量: {{ itemOrderDetail.count }}</div>
                          <div>批号: {{ itemOrderDetail.lot_num }}</div>
                          <div>生产日期: {{ itemOrderDetail.product_date }}</div>
                          <div>有效期至: {{ itemOrderDetail.expire_date }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;justify-content: flex-end;">
              <vxe-button status="primary" @click="printCancel">
                取消
              </vxe-button>
              <vxe-button status="primary" @click="printConfirm">
                确定
              </vxe-button>
            </div>
          </div>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.all-page {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;

  .page-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;

    .page-top {
      margin-top: 5px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .page-main {
      flex: 1;
      overflow: auto;
      margin-bottom: 5px;
      margin-top: 5px;
      padding-top: 5px;
    }

    .page-opration-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 5px;
    }
  }

  .right-side {
    width: 35%;
    display: flex;
    flex-direction: column;

    .side-top {
      background-color: white;
      padding-top: 5px;
      margin-top: 5px;
      margin-right: 20px;
      padding-left: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .page-main {
      flex: 1;
      overflow: auto;
      margin-bottom: 5px;
      margin-top: 5px;
      padding-top: 5px;
      margin-left: 0;
    }

    .page-opration-container-right {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 5px;
      // padding-right: 20px;
    }
  }
}
</style>
